<template>
  <div class="cainiao" style="padding-bottom: 1.5rem;">
    <div class="flex" style="justify-content: space-around; padding:0.4rem 0.3rem;">
      <div class="flexcc"
        style="background: rgb(227, 232, 241); border-radius: 0.3rem; width: 1.2rem; height: 0.6rem; font-size: 0.28rem;"
        @click="search('99999')" :class="operator == '' ? 'act' : ''">全部</div>
      <div class="flexcc"
        style="background: rgb(227, 232, 241); border-radius: 0.3rem; width: 1.2rem; height: 0.6rem; font-size: 0.28rem;"
        @click="search('10086')" :class="operator == '10086' ? 'act' : ''">移动</div>
      <div class="flexcc"
        style="background: rgb(227, 232, 241); border-radius: 0.3rem; width: 1.2rem; height: 0.6rem; font-size: 0.28rem;"
        @click="search('10010')" :class="operator == '10010' ? 'act' : ''">联通</div>
      <div class="flexcc"
        style="background: rgb(227, 232, 241); border-radius: 0.3rem; width: 1.2rem; height: 0.6rem; font-size: 0.28rem;"
        @click="search('10000')" :class="operator == '10000' ? 'act' : ''">电信</div>
      <div class="flexcc"
        style="background: rgb(227, 232, 241); border-radius: 0.3rem; width: 1.2rem; height: 0.6rem; font-size: 0.28rem;"
        @click="search('10099')" :class="operator == '10099' ? 'act' : ''">广电</div>
    </div>
    <div class="flexc" style=" margin:0rem 0.3rem 0rem 0.3rem; height: 44px; background: #fff; border-radius: 0.3rem;">
      <div style="width: 1.5rem; font-size: 0.24rem; text-align: center; border-right: 1px #ccc solid; overflow: hidden;"
        class="shengluehao" @click="dishilog = true">
        {{hao_province}}
        <van-icon name="arrow-down" />
      </div>
      <div>
        <van-field v-model="title" style="width: 4.5rem;" round placeholder="请输入套餐名称、卖点" />
      </div>
      <div style="font-size: 0.24rem; color: #005AFF; width: 0.9rem;" @click="search2()">搜索</div>
    </div>


    <van-popup v-model="dishilog" position="bottom">
      <van-picker title="选择省份" show-toolbar :columns="columns" @confirm="onConfirm" @cancel="onCancel" />
    </van-popup>

    <div style="padding: 0.3rem;">
      <div
        style="background: rgb(255, 255, 255); box-shadow: 0px 0.1rem 0.3rem 0px rgba(0, 0, 0, 0.05); border-radius: 0.3rem; position: relative; padding: 0.2rem; margin-bottom: 0.3rem;"
        v-for="item in list" :key="item.id">
        <div style="position: absolute; left: 0; top: 0;">
          <img src="../../../static/img/shouye7.png" style="width: 0.85rem; height: 0.85rem;" v-if="item.is_main" />
        </div>
        <div class="flex" @click="go2(item)">
          <div>
            <img :src="item.image2 || 'https://91haoka.cn/gth/static/img/kenan.jpg'"
              style="width: 2rem; height: 2rem; margin-right: 0.2rem; border-radius: 0.1rem;" />
          </div>
          <div style="width: 4.3rem;">
            <div style="font-size: 0.26rem; margin-bottom: 0.2rem;" v-if="!item.sale_name">{{ item.title }}</div>
            <div style="font-size: 0.26rem; margin-bottom: 0.2rem;" v-if="item.sale_name">{{ item.sale_name }}</div>
            <div style="font-size: 0.18rem; color: rgb(254, 61, 61); margin-bottom: 0.2rem;">{{ item.points }}</div>
            <div class="flexc">
              <div class="flexcc" style="width: 4.7rem; flex: 1;">
                <div>
                  <div style="font-size: 0.28rem; margin-bottom: 0.1rem; font-weight: bold;" class="flexcc">
                    <span v-if="item.liuliang">{{ item.liuliang }}</span>
                    <span v-if="!item.liuliang">
                      <span v-if="item.liuliang === 0">0</span>
                      <span v-if="!item.liuliang === 0">--</span>
                    </span>
                    <span style="font-size: 0.22rem; position: relative; top: 1px;"
                      v-if="item.liuliang || item.liuliang === 0">G</span>
                  </div>
                  <div style="color: rgb(120, 125, 133); font-size: 0.22rem;" class="flexc">通用流量</div>
                </div>
              </div>
              <div style="width: 1px; height: 0.2rem; background: rgb(227, 232, 241);"></div>
              <div class="flexcc" style="width: 4.7rem; flex: 1;">
                <div>
                  <div style="font-size: 0.28rem; margin-bottom: 0.1rem; font-weight: bold;" class="flexcc">
                    <span v-if="item.dx_liuliang">
                      {{item.dx_liuliang }}
                    </span>
                    <span v-if="!item.dx_liuliang">
                      <span v-if="item.dx_liuliang === 0">0</span>
                      <span v-if="!item.dx_liuliang === 0">--</span>
                    </span>
                    <span style="font-size: 0.22rem; position: relative; top: 1px;"
                      v-if="item.dx_liuliang || item.dx_liuliang === 0">G</span>
                  </div>
                  <div style="color: rgb(120, 125, 133); font-size: 0.22rem;" class="flexc">定向流量</div>
                </div>
              </div>
              <div style="width: 1px; height: 0.2rem; background: rgb(227, 232, 241);"></div>
              <div class="flexcc" style="width: 4.7rem; flex: 1;">
                <div>
                  <div style="font-size: 0.28rem; margin-bottom: 0.1rem; font-weight: bold;" class="flexcc">
                    <span v-if="item.yuyin">{{ item.yuyin }}</span>
                    <span v-if="!item.yuyin">
                      <span v-if="item.yuyin === 0">0</span>
                      <span v-if="!item.yuyin === 0">--</span>
                    </span>
                    <span style="font-size: 0.22rem; position: relative; top: 1px;"
                      v-if=" item.yuyin_type == 0 && (item.yuyin || item.yuyin === 0)">分钟</span>
                    <span style="font-size: 0.22rem; position: relative; top: 1px;"
                      v-if="item.yuyin_type == 1">元/分钟</span>
                  </div>
                  <div style="color: rgb(120, 125, 133); font-size: 0.22rem;" class="flexc">通话时长</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="flex" style="margin-top: 0.25rem;">
          <div
            style="background: rgb(255, 223, 223); border-radius: 0.18rem; padding: 0.06rem 0.15rem; font-size: 0.2rem; color: rgb(254, 61, 61); margin-right: 0.2rem; margin-bottom: 0.2rem;"
            v-if="item.selling_point.length > 0 && item.selling_point[0]">{{ item.selling_point[0] }}</div>
          <div
            style="background: rgb(223, 255, 228); border-radius: 0.18rem; padding: 0.06rem 0.15rem; font-size: 0.2rem; color: rgb(8, 143, 26); margin-right: 0.2rem; margin-bottom: 0.2rem;"
            v-if="item.selling_point.length > 0 && item.selling_point[1]">{{ item.selling_point[1] }}</div>
          <div
            style="background: rgb(233, 241, 255); border-radius: 0.18rem; padding: 0.06rem 0.15rem; font-size: 0.2rem; color: rgb(0, 90, 255); margin-right: 0.2rem; margin-bottom: 0.2rem;"
            v-if="item.selling_point.length > 0 && item.selling_point[2]">{{ item.selling_point[2] }}</div>
          <div
            style="background: rgb(246, 248, 251); border-radius: 0.18rem; padding: 0.06rem 0.15rem; font-size: 0.2rem; color: rgb(120, 125, 133); margin-bottom: 0.2rem;"
            v-if="item.selling_point.length > 0 && item.selling_point[3]">{{ item.selling_point[3] }}</div>
        </div>
        <div class="flexbc pattern">
          <div
            style="width: 1.6rem; height: 0.6rem; background: rgb(233, 241, 255); border-radius: 0.4rem; font-size: 0.24rem; color: rgb(0, 90, 255);"
            class="flexcc">
            <div style="cursor: pointer;" @click="go2(item)">立即办理 </div>
          </div>
          <div @click="haibao(item)" class="flexcc"
            style="background: rgb(0, 90, 255); width: 4.75rem; height: 0.6rem; box-shadow: 0px 0.1rem 0.2rem 0px rgba(0, 90, 255, 0.1); border-radius: 0.3rem; font-size: 0.28rem; color: rgb(255, 255, 255);">
            分享
            <div>
              <img src="../../../static/img/shouye88.png" style="width: 0.3rem; margin-left: 0.1rem;" />
            </div>
            <span style="font-size:14px" <span style="margin-left:5px"
              v-if="item.card_cost != '0.00'">￥{{ item.card_cost }}</span>
          </div>
        </div>
      </div>
    </div>
    <html2canvass ref="html2canvass" :item="item" v-if="html2canvaslog"></html2canvass>
    <footers></footers>
  </div>

  </div>
</template>

<script>
  import footers from '../footer/footers.vue'
  import html2canvass from "./html2canvas.vue";
  export default {
    name: 'cainiao',
    components: {
      html2canvass,footers
    },
    data() {
      return {
        item:"",
        html2canvaslog:false,
        operator: "",
        dishilog: false,
        hao_province: "全国",
        title: "",
        list: [],
        all: "",
        columns: [
          "全国",
          "北京市",
          "天津市",
          "河北省",
          "山西省",
          "内蒙古自治区",
          "辽宁省",
          "吉林省",
          "黑龙江省",
          "上海市",
          "江苏省",
          "浙江省",
          "安徽省",
          "福建省",
          "广西壮族自治区",
          "山东省",
          "山西省",
          "河南省",
          "湖北省",
          "湖南省",
          "广东省",
          "海南省",
          "重庆市",
          "四川省",
          "贵州省",
          "云南省",
          "西藏自治区",
          "陕西省",
          "甘肃省",
          "青海省",
          "宁夏回族自治区",
          "新疆维吾尔自治区",
          "台湾省",
          "香港特别行政区",
          "澳门特别行政区"
        ],
        shop_id:""
      }
    },
    created() {
      if(this.$route.query.shop_id){
          localStorage.setItem('shop_id',this.$route.query.shop_id)
          this.shop_id = this.$route.query.shop_id
      }else{
          this.shop_id = localStorage.getItem('shop_id')
      }


      if(this.$route.query.token){
        axios.post("/api/cainiao/login",{token:this.$route.query.token}).then(response => {
          if (response.data.msg.code == 0) {

          }else {
            this.$message.error(response.data.msg.info);
          }
        })
      }




      let urlbd = ""
      if (this.shop_id) {
        //那就是分销商的店铺
        urlbd = "/api/mstore/info?shop_id=" + window.atob(this.shop_id);
      } else {
        urlbd = "/api/mstore/info";
      }

      let bd = new Promise((res, rej) => {
        axios.get(urlbd).then(response => {
          if (response.data.msg.code == 0) {
            this.all = response.data.data;
            res("ok");
          }
        });
      });
      bd.then(() => {

        let d = new Promise((res, rej) => {
          if (this.all.belong_type == 1) {
            axios.get("/api/ip-address/get").then(response => {
              if (response.data.msg.code == 0) {
                if (response.data.data.addressComponent.province) {
                  this.hao_province =
                    response.data.data.addressComponent.province;
                  res("ok");
                }
              } else {
                if (response.data.data.addressComponent.province) {
                  this.hao_province = "全国";
                  res("ok");
                }
              }
            });
          } else {
            res("ok");
          }
        });
        Promise.all([d]).then(() => {
          let url = "";
          let url2 = "";
          if (this.shop_id) {
            //那就是分销商的店铺

            url = "/api/mstore/info?shop_id=" + window.atob(this.shop_id);
            url2 = `/api/page/list?shop_id=${window.atob(
              this.shop_id
            )}&page=1&page_size=200&hao_province=${this.hao_province}&title=${
              this.title
            }&h5_direct=1`;
          } else {
            //有shops_id就是页面
            if (this.$route.query.shops_id) {
              url = `/api/flow/storeinfo?id=${this.$route.query.shops_id}`;
              url2 =
                `/api/fpage/list?tab=${this.$route.query.shops_id}&page=1&page_size=200&hao_province=${this.hao_province}&title=${this.title}&h5_direct=1`;
            } else {
              //都没有就是管理员店铺
              url = "/api/mstore/info";
              url2 =
                `/api/page/list?page=1&page_size=200&hao_province=${this.hao_province}&title=${this.title}&h5_direct=1`;
            }
          }

          this.getinfo(url);
          this.getlist(url2);
        });
      });

    },
    mounted() {
      var h = document.documentElement.clientWidth / 7.5 + 'px';
      document.documentElement.style.fontSize = h;

      document.title = '菜鸟驿站'
    },
    methods: {
      haibao: function(item) {

        this.html2canvaslog = false;
        this.item = {
          share_img:item.image1,
          top_pic:this.all.top_pic,
          title:item.title,
          store_name:this.all.store_name,
          id:item.id,
          shop_id:this.shop_id
        }

        // this.item = JSON.parse(JSON.stringify(item));
        this.$nextTick(() => {
          this.html2canvaslog = true;
          this.$nextTick(() => {
            // this.$refs.xiazaierweima.getinfo();
          });
        });
      },
      search: function(val) {
        let op = `&category_id=${this.operator}`;
        if (val) {
          this.operator = val;
          if (val == 99999) {
            this.operator = "";
          }
          op = `&operator=${this.operator}`;
        }

        let url2 = "";
        if (this.shop_id) {
          //那就是分销商的店铺
          url2 =
            `/api/page/list?shop_id=${window.atob(this.shop_id)}&page=1&page_size=200${op}&hao_province=${this.hao_province}&title=${this.title}`;
        } else {
          //有shops_id就是页面
          if (this.$route.query.shops_id) {
            url2 =
              `/api/fpage/list?tab=${this.$route.query.shops_id}&page=1&page_size=200${op}&hao_province=${this.hao_province}&title=${this.title}`;
          } else {
            //都没有就是管理员店铺
            url2 = `/api/page/list?page=1&page_size=200${op}&hao_province=${this.hao_province}&title=${this.title}`;
          }
        }
        this.getlist(url2);
      },
      getinfo: function(url) {
        var that = this;
        axios.get(url).then(response => {
          if (response.data.msg.code == 0) {
            this.all = response.data.data;
            if (this.all.json) {
              this.all.json = JSON.parse(this.all.json);
            }

            // localStorage.setItem(
            //   "store_title",
            //   this.all.store_title || this.all.store_name
            // );

            // document.title = this.all.store_title || this.all.store_name;
          }
        });
      },
      onConfirm: function(val) {
        this.hao_province = val;
        this.dishilog = false;
      },
      onCancel: function() {
        this.dishilog = false;
      },
      search2: function() {
        let url2 = "";
        if (this.shop_id) {
          url2 = `/api/page/list?shop_id=${window.atob(
            this.shop_id
          )}&page=1&page_size=200&category_id=${this.operator}&hao_province=${
            this.hao_province
          }&title=${this.title}&h5_direct=0`;
        } else {
          if (this.$route.query.shops_id) {
            url2 =
              `/api/fpage/list?tab=${this.$route.query.shops_id}&page=1&page_size=200&category_id=${this.operator}&hao_province=${this.hao_province}&title=${this.title}&h5_direct=0`;
          } else {
            url2 =
              `/api/page/list?page=1&page_size=200&category_id=${this.operator}&hao_province=${this.hao_province}&title=${this.title}&h5_direct=0`;
          }
        }
        this.getlist(url2);
      },
      getlist: function(url2) {
        axios.get(url2).then(response => {
          if (response.data.msg.code == 0) {
            response.data.data.data.forEach(item => {
              item.yuyin = parseFloat(item.yuyin);
              if (item.selling_point) {
                item.selling_point = JSON.parse(item.selling_point);
              } else {
                item.selling_point = [];
              }
              if (item.image1) {
                item.image2 = item.image1 + "?imageView2/1/w/2000";
              }
            });
            this.list = response.data.data.data;

            if (response.data.data.is_null == 1) {
              this.hao_province = "全国";
            }
          } else {
            vant.Toast(response.data.msg.info);
          }
        });
      },
      go2: function(item) {
        location.href = 'https://njmskj.top/h5/order?id='+item.id+'&app=1&shop_id='+this.shop_id
        // if (this.$route.query.shops_id) {
        //   this.$router.push({
        //     path: "/order",
        //     query: {
        //       id: item.id,
        //       shops_id: this.$route.query.shops_id
        //     }
        //   });
        // } else {
        //   this.$router.push({
        //     path: "/order",
        //     query: {
        //       id: item.id,
        //       shop_id: this.$route.query.shop_id
        //     }
        //   });
        // }
      },

      fenxianglogs: function(item) {
        this.xuanzhongde = item;
        let erweima = "";
        if (this.$route.query.shops_id) {
          erweima = `${location.origin}/h5/order?id=${this.xuanzhongde.id}&shops_id=${this.$route.query.shops_id}`;
        } else {
          if (this.shop_id) {
            erweima = `${location.origin}/h5/order?id=${this.xuanzhongde.id}&shop_id=${this.shop_id}`;
          } else {
            erweima = `${location.origin}/h5/order?id=${this.xuanzhongde.id}`;
          }
        }
        let share_img = "";
        if (this.xuanzhongde.share_img) {
          share_img = this.xuanzhongde.share_img;
        } else {
          if (this.xuanzhongde.image1) {
            share_img = this.xuanzhongde.image1;
          }
        }
        this.selectObj = {
          share_img: share_img,
          logo: this.all.left_pic,
          erweima: erweima,
          title: this.xuanzhongde.title,
          shopname: this.all.store_name
        };
        this.$refs.childRef.open();
        // console.log('this.isshowwind=>',this.isshowwind);

        // this.$router.push({
        //   path: "/haibao",
        //   query: {
        //     share_img: share_img,
        //     logo: this.all.left_pic,
        //     erweima: erweima,
        //     title: this.xuanzhongde.title,
        //     shopname: this.all.store_name
        //   }
        // });

        // this.$nextTick(()=>{
        //   let url2 = "https://www.baidu.com"
        //   var d = document.createElement('div')
        //   d.setAttribute('id','erweimadiv')
        //   document.body.appendChild(d)
        //   var qrcode = new QRCode(document.getElementById('erweimadiv'), {
        //       text: url2,
        //       width: 220,
        //       height: 220,
        //       colorDark : "#000000",
        //       colorLight : "#ffffff",
        //       correctLevel : QRCode.CorrectLevel.H
        //   })
        //   var canvas = document.getElementById("erweimadiv").getElementsByTagName("canvas")[0];
        //   this.img2 = canvas.toDataURL("image/png");

        //   this.haibao()
        // })
      },
    }
  }
</script>


<style scoped lang="less">
  .cainiao{ width: 100vw; overflow: hidden; background: #f6f8fb;  }
  /deep/ .van-tab {
    background: rgb(227, 232, 241);
    flex-shrink: 0;
    border-radius: 0.3rem;
    padding: 0 0.3rem;
    margin-right: 0.3rem;
    height: 0.6rem;
    font-size: 0.28rem;
  }

  /deep/ .van-tabs__nav {
    background: transparent;
  }

  /deep/ .van-tab--active {
    background: rgb(0, 90, 255) !important;
    color: #fff;
  }

  /deep/ .van-tabs__line {
    display: none;
  }

  /deep/ .el-dialog {
    background: rgb(246, 248, 251);
    border-radius: 29px;
  }

  .xianshi {
    background: rgb(64, 156, 255) !important;
    color: #fff !important;
  }

  .act {
    background: rgb(0, 90, 255) !important;
    color: #fff;
  }

  .qrCodeUrl {
    width: 6rem;

    img {
      width: 6rem;
    }
  }

  .nax::-webkit-scrollbar {
    display: none;
  }

  .pattern {
    border-top: 1px solid #F7F7F7;
    padding-top: 10px;
  }
</style>
